<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 图表 -->
    <el-card class="card">
      <div
        id="main"
        ref="echarts_main"
        style="width: 800px; height: 400px"
      ></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getCharts } from "@/api/reports";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echarts_main);
    this.getChartsData();
  },
  methods: {
    async getChartsData() {
      const {
        data: { data },
      } = await getCharts();
      console.log(data, "data");
      if (data) this.setOptions(data);
    },
    setOptions(data) {
      let option = data;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { type: ["line", "bar"] }, 
          },
        },
        ...data,
      };
      this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.card {
  margin-top: 20px;
}
</style>